<template>
  <div class="order-info">
    <a-card>
      <h2> 订单信息</h2>
      <a-divider></a-divider>
      <div class="search">
        <a-input-search placeholder="请根据客户名称进行搜索" enter-button v-model:value="keyword" @search="onSearch" />
        <a v-if="isSearch" href="javascript:;" @click="back">返回</a>
        <a-button type="primary" @click="show= true">新增订单</a-button>
      </div>
      <a-table :rowKey="(record,index)=> index" :pagination="false" :columns="columns" :data-source='list' bordered :scroll="{  y: 300 }">
        <template #orderDate="{record}">
          {{timeTransfer(record.orderDate)}}
        </template>
        <template #payState="{record}">
          <span :class="record.payState==0?'todo':'done'">{{record.payState==0?'待支付':'已支付'}}</span>
        </template>
        <template #actions="{record}">
          <a href="javascript:;" @click="updateInfo(record)">更改&nbsp; </a>
          <a-popconfirm title="Are you sure？" ok-text="Yes" cancel-text="No" @confirm="remove(record)">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </template>
      </a-table>
      <a-pagination v-if="!isSearch" v-model:current="current" :total="total" :page-size="5" @change="setPage"></a-pagination>
      <add-order v-if="show" :show="show" @setShow='setShow' :initData="initData"></add-order>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import AddOrder from "./components/AddOrder.vue";
import { project, order } from "../../service";
import { timeTransfer } from "../../utils/timeTransfer";
import { message } from "ant-design-vue";
export default defineComponent({
  components: {
    AddOrder,
  },
  setup() {
    const show = ref(false); //弹框
    const setShow = (payload) => {
      show.value = payload;
      getList();
    };

    /**搜索 */
    const keyword = ref("");
    const isSearch = ref(false);
    const onSearch = () => {
      getList();
      console.log("keyword.value", keyword.value);
      if (keyword.value != "") {
        isSearch.value = true;
        console.log("isSearch.value", isSearch.value);
      }
    };
    //返回
    const back = () => {
      isSearch.value = false;
      keyword.value = "";
      getList();
    };

    /**表格 */
    const columns = [
      {
        title: "客户名称",
        dataIndex: "cusName",
      },
      {
        title: "联系电话",
        dataIndex: "cusPhone",
      },
      {
        title: "项目名",
        dataIndex: "projectName",
      },
      {
        title: "下单日期",
        slots: {
          customRender: "orderDate",
        },
      },
      {
        title: "支付状态",
        slots: {
          customRender: "payState",
        },
      },
      {
        title: "操作",
        slots: {
          customRender: "actions",
        },
      },
    ];
    const list = ref([]);
    const total = ref(0);
    const current = ref(1);
    const getList = async () => {
      const res = await order.list(current.value, 5, keyword.value);
      console.log("getList", res);
      if (res.data.code == 200) {
        list.value = res.data.data.list;
        total.value = res.data.data.total;
      }
    };
    onMounted(() => {
      getList();
    });
    const setPage = async (page) => {
      current.value = page;
      getList();
    };
    /**移除记录 */
    const remove = async ({ _id }) => {
      const res = await order.remove(_id);
      if (res.data.code == 200) {
        message.success(res.data.msg);
        getList();
      }
    };

    /**更改操作 */
    const updateInfo = (record) => {
      show.value = true;
      console.log("打印update", record);
      initData.value = record;
    };
    const initData = ref({});

    return {
      keyword,
      isSearch,
      onSearch,
      back,
      show, //弹框
      setShow,
      //列表
      columns,
      list,
      total,
      current,
      timeTransfer,
      remove,

      updateInfo,
      initData,
      setPage
    };
  },
});
</script>

<style lang="less" scoped>
@import url("../../assets/styles/common.less");
@import url("./styles/common.less");
</style>